<template>
    <div>

        <van-pull-refresh class="boxaw" v-model="isLoading" @refresh="onRefresh">
            <van-nav-bar title="- 请如实填报 -" />

            <van-form :data="lisData">
                <van-cell-group class="ab" title="姓名">
                    <van-field v-model="xzsxm" type="String" readonly placeholder="请输入姓名" />
                </van-cell-group>
                <van-cell-group class="ab" title="手机号">
                    <van-field v-model="xzssjh" type="number" readonly placeholder="请输入手机号" />
                </van-cell-group>
                <van-cell-group class="ab" title="事发港区">
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker show-toolbar title="标题" :columns="columns" @change="onChange" @confirm="onConfirm"
                            defaultIndex="0" />
                    </van-popup>
                    <van-field class="djxzhw" readonly clickable name="picker" label="" :value="lisData.valuea"
                        placeholder="点击选择港区" @click="showPicker = true" />
                </van-cell-group>
                <van-cell-group title="嫌疑人所在船舶国籍">
                    <van-field v-model="lisData.xyr1" placeholder="可填写不确定" />
                </van-cell-group>
                <van-cell-group title="嫌疑人所在船舶IMO号">
                    <van-field v-model="lisData.imo" placeholder="可填写不确定" />
                </van-cell-group>
                <van-cell-group title="事发具体位置">
                    <van-field v-model="lisData.address" placeholder="请填写事发位置" right-icon="location-o">
                        <template #button>
                            <van-button size="small" @click="qwe">获取位置</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <van-cell-group class="ab" title="举报详情">
                    <van-field v-model="lisData.jbxq" placeholder="如详细描述，时间，地点，经纬度等" />
                </van-cell-group>
                <van-cell-group class="ab" title="拍照举证">
                    <!-- <el-upload class="avatar-uploader" accept="image/*"
                        action="http://58.59.43.168:8088/jeecg-boot/api/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> -->
                    <van-uploader v-model="fileList" multiple :after-read="afterRead4" :max-count="1" />
                </van-cell-group>
                <van-button native-type="submit" round type="info" size="large" class="yd" block @click="mstj">马上提交
                </van-button>
                <div style="width: 90%;height: 50px;"></div>
            </van-form>
        </van-pull-refresh>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                showPicker: false,
                id: [],
                pc: [],
                pid: "",
                pqname: "",
                columns: [
                    // 第一列
                    {
                        values: ['请选择'],
                        defaultIndex: 0,
                    },
                    // 第二列
                    {
                        values: [],
                        defaultIndex: 0,
                    },
                ],
                fileList: [],
                xzsxm: "",
                xzssfz: "",
                // xzssjh: "",
                count: 0,
                isLoading: false,
                lisData: {
                    sfz: "",
                    username: "",
                    phone: "",
                    radio: '1',
                    xyr1: "",
                    xyr2: "",
                    sfwz: "",
                    imo: "",
                    jbxq: "",
                    pzjz: '',
                    address: "",
                },
                // **登录表单校验规则**
                formRyles: {
                    // 手机号校验规则
                    mobile: [{
                            required: true,
                            message: ''
                        },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '手机格式错误'
                        }
                    ],
                    xm: [{
                        required: true,
                        message: ""
                    }],
                    xq: [{
                        required: true,
                        message: ""
                    }],
                    gj: [{
                        required: true,
                        message: ""
                    }],
                    gj: [{
                        required: true,
                        message: ""
                    }],
                    ch: [{
                        required: true,
                        message: ""
                    }],
                },
                imageUrl: ''
            };

        },
        created() {
            this.kouanxx()
            this.qwer()
        },
        mounted() {
            var mx = window.sessionStorage.getItem("mz")
            var sjh = window.sessionStorage.getItem("sjh")
            var sfz = window.sessionStorage.getItem("sfz")
            var xb = window.sessionStorage.getItem("xb")
            this.lisData.username = mx
            this.lisData.sfz = sfz
            // this.sfz = sfz
            this.lisData.phone = sjh
            // this.radio = xb
            if (xb == 1) {
                this.xb = "男"
            }
            if (xb == 2) {
                this.xb = "女"
            }
            this.name = mx
            this.sfz = sfz
            this.lxdh = sjh
            this.radio = xb
            // 须展示
            this.xzsxm = mx
            this.xzssjh = sjh
            this.xzssfz = sfz
            if (this.xzsxm.length == '2') {
                this.xzsxm = '*' + this.xzsxm.charAt(this.xzsxm.length - 1)
            }
            if (this.xzsxm.length == '3') {
                this.xzsxm = '**' + this.xzsxm.charAt(this.xzsxm.length - 1)
            }
            if (this.xzsxm.length == '4') {
                this.xzsxm = '***' + this.xzsxm.charAt(this.xzsxm.length - 1)
            }
            if (this.xzsxm.length == '5') {
                this.xzsxm = '****' + this.xzsxm.charAt(this.xzsxm.length - 1)
            }
            this.xzssjh = this.xzssjh.substr(0, 3) + '******' + this.xzssjh.substr(9, 2)
            // 15位身份证号
            if (this.xzssfz.length == '15') {
                this.xzssfz = this.xzssfz.substr(0, 1) + '*************' + this.xzssfz.substr(14, 1)
            }
            // 18位身份证号
            if (this.xzssfz.length == '18') {
                this.xzssfz = this.xzssfz.substr(0, 1) + '****************' + this.xzssfz.substr(17, 1)
            }
        },
        methods: {
            onConfirm(value, index) {
                var that = this
                if (value == "请选择,") {
                    that.lisData.valuea = ""
                } else {
                    that.lisData.valuea = value
                }
                that.showPicker = false
            },
            onChange(picker, value, index) {
                this.columns[1].values = []
                console.log(value);
                console.log(index);
                console.log(this.id);
                this.id.forEach(e => {
                    if (e.name == value[0]) {
                        this.pid = e.id
                        console.log(this.pid);
                        this.qwer()
                    }
                })
                // Toast(`当前值：${value}, 当前索引：${index}`);
            },
            kouanxx() {
                var that = this
                var jmqsjtj = JSON.stringify({
                    //入参内容
                })
                var jmhsjtj = SM.encrypt(jmqsjtj,
                    //公钥
                    "04f82fca5663e92a3830c8bdab96a9383a83610bb793da146ea4dfbb4035690c36bf7816aa00cd57d9df96b35d4286b75d8a7c2210300f4d70899a08ea0357a692"
                );
                // var appid = that.appid;
                var appid = "Embmzckm";
                var interfaceid = 'hqkalb';
                var interfacecontent = jmhsjtj
                var fromport = '2';
                var signurl = 'https://' + urldomaincreatesign;
                var gatewayurl = 'https://' + urldomaingateway;
                vaildInterfacefn(appid, interfaceid, interfacecontent, fromport, signurl, gatewayurl).then(value => {
                    //私钥
                    var jjjsjtj = SM.decrypt(value,
                        "6636756e69f8276c514919d04eaf928498b443bfb783e8fe6fa6977056c4d90b");
                    var list = JSON.parse(jjjsjtj)
                    list.result.id = that.kaid
                    console.log("111", list.result);
                    that.id = list.result
                    // that.columns[0].values = list.result
                    list.result.forEach(element => {
                        console.log(element.name);
                        that.columns[0].values.push(element.name)
                        // that.columns[0].values.push(that.id)
                    });

                })

            },
            qwer() {
                var that = this
                that.columns[1].values = []
                var jmqsjtj = JSON.stringify({
                    //入参内容
                    "pid": that.pid
                })
                var jmhsjtj = SM.encrypt(jmqsjtj,
                    //公钥
                    "044c3b77bd712882d1682fc27cd7624a5bdd052240919b130f2f17b5334aa6112fc7943f73f573a5f3530db3295d172c7e3d26d9d3823e6528a8e121dbd23ad3a0"
                );
                // var appid = that.appid;
                var appid = "Embmzckm";
                var interfaceid = 'kapq';
                var interfacecontent = jmhsjtj
                var fromport = '2';
                var signurl = 'https://' + urldomaincreatesign;
                var gatewayurl = 'https://' + urldomaingateway;
                vaildInterfacefn(appid, interfaceid, interfacecontent, fromport, signurl, gatewayurl).then(value => {
                    //私钥
                    var jjjsjtj = SM.decrypt(value,
                        "6636756e69f8276c514919d04eaf928498b443bfb783e8fe6fa6977056c4d90b");
                    var list = JSON.parse(jjjsjtj)
                    // that.columns[0].values = list.result
                    list.result.forEach(element => {
                        console.log(element.name);
                        console.log("aaaaaaa", element);
                        that.pqname = element.name
                        that.columns[1].values.push(element.name)
                        // that.columns[0].values.push(that.id)
                    });
                })

            },
            // `````````````````````````````````````````````````````````````````````````````````````
            qwe() {
                var that = this
                that.$toast.loading({
                    message: '获取位置中...',
                    forbidClick: true,
                    duration: 50000,
                });
                let aMapScript = document.createElement('script')
                // 少这句绝对会误差几百米
                window._AMapSecurityConfig = {
                    securityJsCode: '5eb78774a5a49ee463cbe869ac27ac65',
                }
                aMapScript.setAttribute('src',
                    'https://webapi.amap.com/maps?v=1.4.11&key=88756b5c865be729aa02adbc0a1691ce&plugin=AMap.CitySearch'
                )
                document.head.appendChild(aMapScript)
                return aMapScript.onload = function () {
                    AMap.plugin('AMap.Geolocation', function () {
                        var geolocation = new AMap.Geolocation({
                            // 是否使用高精度定位，默认：true
                            enableHighAccuracy: true,
                            // 设置定位超时时间，默认：无穷大
                            timeout: 10000,
                            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                            buttonOffset: new AMap.Pixel(10, 20),
                            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                            zoomToAccuracy: true,
                            //  定位按钮的排放位置,  RB表示右下
                            buttonPosition: 'RB'
                        })

                        geolocation.getCurrentPosition()
                        AMap.event.addListener(geolocation, 'complete', onComplete)
                        AMap.event.addListener(geolocation, 'error', onError)

                        function onComplete(data) {
                            // data是具体的定位信息
                            console.log(data)
                            that.lisData.address = data.formattedAddress
                            that.$toast.clear();
                        }

                        function onError(data) {
                            console.log(data)
                            // 定位出错
                            console.log('123123s')
                        }
                    })
                }
            },
            afterRead4(file) {
                var that = this
                that.$toast.loading({
                    message: '上传中...',
                    forbidClick: true,
                    duration: 50000,
                });
                // // 参数
                console.log("123", file)

                let headers = {
                    "mimeType": "multipart/form-data",
                };
                let requestData = {}
                let ssss = JSON.stringify(requestData)
                var jmhsjtj = SM.encrypt(ssss,
                    "04c8a3f92811813de0fb7f4fac39a1ddcac65445770e593f89a337e2ba400cde970d4eafb556cda56bd6ad9f41a32f944653a9024fee28298b3aaafe90f0644f96"
                );
                let fdDqtq = new FormData()
                fdDqtq.append('app_id', "Embmzckm")
                fdDqtq.append('interface_id', 'tpscaa')
                fdDqtq.append('version', '1.0')
                fdDqtq.append('biz_content', jmhsjtj)
                fdDqtq.append('header', JSON.stringify(headers))
                fdDqtq.append('file', file.file)
                fdDqtq.append('charset', 'utf-8')
                fdDqtq.append('timestamp', (new Date()).valueOf())
                fdDqtq.append('origin', '2')
                fdDqtq.append('sign', 'signResult')
                $.ajax({
                    url: "https://isdapp.shandong.gov.cn/jpaas-jags-server/interface/gateway",
                    type: 'post',
                    dataType: 'json',
                    data: fdDqtq,
                    contentType: false,
                    processData: false,
                    cache: false,
                    success: function (data) {
                        console.log(data);
                        let response = JSON.parse(SM.decrypt(data.data,
                            "6636756e69f8276c514919d04eaf928498b443bfb783e8fe6fa6977056c4d90b"))
                        console.log(response);
                        that.lisData.pzjz = response.result[0]
                        // window.sessionStorage.setItem("sqs", that.sqs)
                        // console.log("sqs", that.sqs);
                        console.log("爱山东");
                        that.$toast.clear();
                    },
                    error: function (data) {
                        console.log(data);

                    }
                })
            },
            onRefresh() {
                setTimeout(() => {
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
            // mstj() {
            //     this.$router.push('/tjcg')
            // },
            onSubmit(values) {
                console.log('submit', values);
                console.log(this.lisData);
                this.$router.push('/tjcg')
            },
            mstj() {
                var that = this
                if (that.lisData.xyr1 == "") {
                    that.$toast("请输入嫌疑人所在船舶国籍")
                    return
                }
                if (that.lisData.address == "") {
                    that.$toast("请输入事发具体位置")
                    return
                }
                if (that.lisData.imo == "") {
                    that.$toast("请输入嫌疑人所在船舶IMO号")
                    return
                }
                if (that.lisData.jbxq == "") {
                    that.$toast("请输入举报详情")
                    return
                }
                if (that.lisData.pzjz == "") {
                    that.$toast("请上传举证")
                    return
                }
                var jmqsjtj = JSON.stringify({
                    //入参内容
                    "createBy": "",
                    "createTime": "",
                    "id": "",
                    "sfz": that.lisData.sfz,
                    "imo": that.lisData.imo,
                    "jbxq": that.lisData.jbxq,
                    "name": that.lisData.username,
                    "phone": that.lisData.phone,
                    "pzjz": that.lisData.pzjz,
                    "sfgq": that.pqname,
                    "sfwz": that.lisData.address,
                    "sh": "",
                    "shxx": "",
                    "sysOrgCode": "",
                    "type": "船舶未经边检机关批准擅自搭靠外国船舶的违法行为",
                    "updateBy": "",
                    "updateTime": "",
                    "xyrgj": that.lisData.xyr1,
                    "address": that.lisData.address,
                })
                var jmhsjtj = SM.encrypt(jmqsjtj,
                    //公钥
                    "0423151849143928422e71b516655f35110677b440c462d4d739e5dc2d6c62e0fbda6f320df48f518fc01cd3b378767981bb42d464764f0914d6cce1bbe665ab29"
                );
                // var appid = that.appid;
                var appid = "Embmzckm";
                var interfaceid = 'wyjbty';
                var interfacecontent = jmhsjtj
                var fromport = '2';
                var signurl = 'https://' + urldomaincreatesign;
                var gatewayurl = 'https://' + urldomaingateway;
                vaildInterfacefn(appid, interfaceid, interfacecontent, fromport, signurl, gatewayurl).then(value => {
                    //私钥
                    var jjjsjtj = SM.decrypt(value,
                        "6636756e69f8276c514919d04eaf928498b443bfb783e8fe6fa6977056c4d90b");
                    var list = JSON.parse(jjjsjtj)
                    console.log(list);
                    if (list.code == 200) {
                        this.$toast("提交成功")
                        this.$router.push('./')
                    }
                })

            }
        },
    };
</script>

<style scoped>
    .yd {
        margin-bottom: 40px;
        width: 90%;
        left: 5%;
    }

    .van-cell {
        font-size: 18px;
    }

    .van-cell-group__title {
        font-size: 18px;
    }

    .van-pull-refresh {
        height: calc(100vh - 1px) !important;
        overflow: auto !important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .van-cell-group__title {
        color: #6b6262;
    }

    .van-cell-- {
        background-color: #a6a6a626;
    }

    .boxaw {
        height: 100vh;
    }

    .van-cell-group__title:before {
        content: "*";
        color: red;
        margin-right: 5px;
        font-size: 14px;

    }

    /* .ab:before {
        position: relative;
        content: "*";
        color: red;
        margin-right: 5px;
        font-size: 14px;
        top: -25px;
        left: 5px;
    } */
</style>